<script lang='ts' setup>

import { computed, ref } from "vue";
import { useUserStore } from "../../../utils/store/store";
import { userType } from "../../../utils/ts/user";
import { useRouter } from "vue-router";


const store = useUserStore();
const userData = computed<userType | null>(() => store.getUser());
const router = useRouter()

const coupon = ref('100.00')
const total = ref('10000.00')

const rest = computed(() => {
    return +total.value - +coupon.value
        -
        +(userData.value?.wallet.balance || 0)
})

// onMounted(() => {

// })

defineProps([
    'open'
])

const emit = defineEmits([
    'close'
])


const handleOk = () => {
    emit("close")
};

const handleCancel = () => {
    emit("close")
}

const aliPay = () => {
    emit("close")
    router.push({
        path: "/finance/charge"
    })
}

// const confirmPay = () => {
//     emit("close")
//     window.open("#")
// }
</script>
<template>
    <a-drawer :open="open" title="结算" @ok="handleOk" @close="handleCancel" :headerStyle="{ display: 'none' }"
        :maskClosable="true">
        <p>
            <span class="tag">
                商品总价：
            </span>
            <span>
                {{ total }}元
            </span>
        </p>
        <div class="mb-5">
            <span class="tag">
                账户余额：
            </span>
            <span>{{ userData?.wallet.balance || "0" }}元</span>
        </div>
        <p class=" mt-3 ">
            <span class="tag">
                优惠金额：
            </span>
            <span>
                -{{ coupon }}元
            </span>
        </p>

        <p>
            <span class="tag">
                待支付：
            </span>
            <span>
                <!-- 
{{ total }}(商品总价) - {{ coupon }}(优惠券) - {{ userData?.wallet.balance || 0 }}(账户余额) =
                  -->
                <span class="text-red-600 font-bold">
                    {{ rest }}元
                </span>
            </span>
        </p>

        <div class="flex justify-around">
            <a-button type="primary" @click="aliPay">
                充值
            </a-button>
            <!-- <a-button type="primary" @click="confirmPay">
                确认支付
            </a-button> -->
        </div>
    </a-drawer>
</template>
<style lang='scss' scoped>
.tag {
    display: block;
}

.tag+span {
    padding-left: 4rem;
    font-weight: 600;
    font-size: 1.3rem;
}
</style>